<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>zonghe3-1</title>
<style>
  
     #layer1{width:100%;height:200px;background:#39F;}
	        #layer1-1{width:100%;height:150px;background:#39F;}
	        #layer1-2{width:100%;height:50px;background:blue;}
	 #layer2{width:100%;height:500px;background:white;margin:0;}
			  #layer2-1{width:25%;height:500px;background:#39F;float:left;}
			   #layer2-2{width:50%;height:500px;background:#0F3;float:left;}
			    #layer2-3{width:25%;height:500px;background:#39F;float:left;}  
				  #layer2-4{clear:both;}
	 #layer3{width:100%;height:100px;background:blue;margin:0;}
	 .head{color:black;text-align:center;font-size:40px;line-height:150px;}
	 #layer1-2 a{  float:left;
	               font-size:20px;
	               color:#FFF;
				   width:20%;
				   height:50px;
				   line-height:50px;
				   text-align:center;
				   text-decoration:none;
	           }
			 
      #layer2-1 a{
		          height:4.5em;
				  width:100%;
				  display:block;
				  
				  text-align:center;
				  border-left:20px solid yellow;
				  border-top:1px solid white;
				  text-decoration:none;
				  background:#66F
				   }
       table{width:100%;height:420px;
	          border-collapse:collapse;
			  border-color:#FFFFFF;}
	          .foot{color:white;
			        font-size:16px;
					text-align:center;
					line-height:100px;}
     a:hover{background:#33FFFF;}
	 #layer2 a:hover{background:#66FF99;}
	 
</style>
</head>

<body>
        <div id="layer1">            
                           <div id="layer1-1"><p class="head">商苑论坛</p></div>         
                                        <div id="layer1-2">
									           <a href="#">学习</a>  
											    <a href="#">体育</a> 
												  <a href="#">娱乐</a>   
												  <a href="#">青春</a>    
											</div>        
                  </div>
        <div id="layer2">             
                             <div id="layer2-1"><p class="head1">学院板块</p>
							                       <hr size="3"width="80%"align="left"/>
                                                      <a href="#">工商管理学院</a>  
													  <a href="#">会计金融学院</a>  
													   <a href="#">信息与艺术学院</a>  
													    <a href="#">智能服务学院</a>  
														 <a href="#">公共管理学院</a>  
														 <a href="#">食品药品学院</a>
                                    </div>              
                              <div id="layer2-2"><p class="head2">帖子内容</p>
							                       <hr size="3"width="80%" />
												   <table border="1">
												         <tr><th>回复</th>
														      <th>主题</th>
															  <th>最后发言</th>
														  </tr>
													      <tr>
														      <td>100</td>
													      	  <td>往年各类常见问题汇总</td>
													     	  <td>刚刚</td>
														  </tr>
														  <tr>
														      <td>101</td>
													      	  <td>洪楼校区完整介绍</td>
													     	  <td>2017/11/8</td>
														  </tr>
														  <tr>
														      <td>102</td>
													      	  <td>你不知道的商职</td>
													     	  <td>2017/11/7</td>
														  </tr>
														  <tr>
														      <td>210</td>
													      	  <td>课后生活之吃喝玩乐大全</td>
													     	  <td>2017/11/6</td>
														  </tr>
														  <tr>
														      <td>104</td>
													      	  <td>王建平教授的经典语录</td>
													     	  <td>2017/11/5</td>
														  </tr>
														  <tr>
														      <td>205</td>
													      	  <td>你不知道的美</td>
													     	  <td>2017/11/4</td>
														  </tr>
														  <tr>
														      <td>206</td>
													      	  <td>商不起，我代言。</td>
													     	  <td>2017/11/3</td>
														  </tr>
														  <tr>
														      <td>107</td>
													      	  <td>商职吧吧规4.0正式版</td>
													     	  <td>2017/11/2</td>
														  </tr>
														  <tr>
														      <td>108</td>
													      	  <td>广告，兼职信息汇总贴</td>
													     	  <td>2017/11/1</td>
														  </tr>
														</table> 
														  </div>                  
                               <div id="layer2-3"><p class="head3">热帖排行</p>
							                      <hr size="3"width="80%" />
												            <ol>
															    <li>课后生活之吃喝玩乐大全</li>
																<li>商不起，我代言。</li>
																<li>你不知道的美</li>
												             </ol>
												  </div>     
                               <div id="layer2-4"></div>     
                     </div>
        <div id="layer3"><p class="foot">学校地址：济南市旅游路4516号 编码：250103</p></div>
</body>
</html>